<script setup lang="ts">
// 原有脚本部分保持不变
import {ref} from 'vue'
import Menu from './moulder/Menu.vue'
import Content from './moulder/Content.vue'
import Header from './moulder/Header.vue'
import Footer from './moulder/Footer.vue'
import {usePermissionStore} from "@/stores/premission_store.ts";

const collapsed = ref(true)
const activeMenuKey = ref<string | null>(null)

let menuItems: Menu.MenuModel[];

function handleCollapseChange() {
  collapsed.value = !collapsed.value
}

function handleMenuSelect(key: string) {
  activeMenuKey.value = key
}

const permissionStore = usePermissionStore()

function init() {
  menuItems = permissionStore.menuList
}

init()
</script>

<template>
  <n-space vertical class="layout-container">
    <n-layout has-sider class="main-layout">
      <!-- 侧边栏优化 -->
      <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        :collapsed="collapsed"
        show-trigger="bar"
        :native-scrollbar="false"
        @collapse="handleCollapseChange"
        @expand="handleCollapseChange"
        class="app-sider"
      >
        <Menu
          :collapsed="collapsed"
          :menu-items="menuItems"
          :active-key="activeMenuKey"
          @select="handleMenuSelect"
        />
      </n-layout-sider>

      <!-- 主内容区优化 -->
      <n-layout class="main-content">
        <!-- 头部优化 -->
        <n-layout-header class="app-header">
          <Header
            :collapsed="collapsed"
            :menu-items="menuItems"
            :active-key="activeMenuKey"
            @select="handleMenuSelect"
          />
        </n-layout-header>

        <!-- 内容区域优化 -->
        <n-layout-content class="app-content">
          <Content/>
        </n-layout-content>

        <!-- 页脚优化（按需启用） -->
        <!-- <n-layout-footer class="app-footer">
          <Footer/>
        </n-layout-footer> -->
      </n-layout>
    </n-layout>
  </n-space>
</template>

<style scoped>
/* 整体容器 */
.layout-container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #f8f9fa;
}

/* 侧边栏优化 */
.app-sider {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);

  :deep(.n-layout-sider-scroll-container) {
    padding: 8px 0;
  }
}

/* 头部样式 */
.app-header {
  height: 64px;
  padding: 0 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 内容区域优化 */
.app-content {
  min-height: calc(100vh - 64px);
  padding: 5px;
  background: #ffffff;
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  overflow: auto;

  @media (max-width: 768px) {
    margin: 8px;
    padding: 5px;
  }
}

/* 页脚样式 */
.app-footer {
  height: 64px;
  padding: 0 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  display: flex;
  align-items: center;
  position: sticky;
  bottom: 0;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .app-header {
    height: 56px;
    padding: 0 5px;
  }

  .app-content {
    min-height: calc(100vh - 56px);
  }

  .app-sider {
    :deep(.n-layout-toggle-button) {
      display: none;
    }
  }
}
</style>
